<template>
  <div>
    <!-- 顶部背景栏 -->
    <TopBg/>
    <!-- 中间卡片栏 -->
    <CenterCard v-show="!isMobile"/>
    <!-- 中间mian部分 -->
    <div class="main">
      <div class="main_left">
        <LeftNav v-show="!isMobile"/>
        <LeftBottom v-show="!isMobile"/>
      </div>
      <MainCenter v-if="isRouterAlive" />
    </div>
    <div class="bottom">
      <div class="bottom_content">
        <div class="d-flex jc-between info">
          <div class="information wthree" v-if="!isMobile">
            <span class="a_bottom_big">站点信息</span>
            <div class="d-flex flex-warp zhandianinfo jc-start">
              <a href="/">关于我</a>
              <a href="/label">标签</a>
              <a href="/classify">分类</a>
              <a href="/project">项目</a>
              <a href="/social">社交</a>
            </div>
          </div>
          <div class="follow wthree d-flex flex-colum">
            <span class="a_bottom_big">关注我吧</span>
            <div class="d-flex jc-content mt-5">
              <img
                src="https://dxtoss.oss-cn-hangzhou.aliyuncs.com/img/2020-04/PUXk5phphlQHoz1588231725200430.jpg"
                width="150"
              />
              <img
                src="https://dxtoss.oss-cn-hangzhou.aliyuncs.com/img/2020-04/ppRLaphpyWZHaT1588231740200430.jpg"
                width="150"
              />
            </div>
          </div>
        </div>
        <div class="b_bottom">
          <!-- <img src="" alt=""> -->
          <a>备案号：</a>
          <a class="beiana" href="http://beian.miit.gov.cn" target="_blank">赣ICP备20005647号</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftNav from "./LeftNav/LeftNav";
import LeftBottom from "./LeftBottom/LeftBottom";
import MainCenter from "./MainCenter/MainCenter";
import TopBg from "../TopBg/TopBg";
import CenterCard from "../CenterCard/CenterCard";
export default {
  components: {
    LeftNav,
    LeftBottom,
    MainCenter,
    TopBg,
    CenterCard,
  },
  data() {
    return {
      isRouterAlive: true,
      screenWidth: document.body.clientWidth, // 屏幕宽度
      timer: false,
      isMobile: this.$store.state.isMobile
    };
  },
  provide() {
    return {
      reload: this.reload
    };
  },
  watch: {
    screenWidth(val) {
      const isMobile = this.$store.state.isMobile;
      if (!this.timer) {
        if (val >= 768) {
          // pc端
          setTimeout(() => {
            this.$store.commit("updateIsMobile", false);
          }, 0);
        } else {
          // 移动端
          this.$store.commit("updateIsMobile", true);
        }
        this.timer = true;
        setTimeout(() => {
          this.timer = false;
        }, 400);
      }
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    },
    __choiceWidth() {}
  },
  created() {
    let screen = document.body.clientWidth;
    if (screen >= 768) {
      // pc端
      this.$store.commit("updateIsMobile", false);
    } else {
      // 移动端
      this.$store.commit("updateIsMobile", true);
    }
  },
  mounted() {
    // 监听窗口大小
    window.onresize = () => {
      return (() => {
        let screen = document.body.clientWidth;
        this.screenWidth = screen;
        if (screen >= 768) {
          // pc端
          this.$store.commit("updateIsMobile", false);
        } else {
          // 移动端
          this.$store.commit("updateIsMobile", true);
        }
      })();
    };
  }
};
</script>

<style lang="scss" scoped>
@media (min-width: 768px) {
  .main {
    width: 80%;
    margin: 0 auto;
    // border: 1px solid red;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    .main_left {
      width: 25%;
    }
  }
}
@media (max-width: 768px) {
  .main {
    width: 100%;
  }
  .info {
    flex-direction: column;
  }
  .info div {
    // width: 33%;
    height: 130px !important;
  }
  .bottom {
    margin-bottom: 55px;
  }
  .information{
    width: 100% !important;
    height: 60px !important;
  }
  .bottom_content {
    width: 100% !important;
    padding: 20px !important;
  }
  .zhandianinfo {
    margin-top: 0 !important;
    padding: 10px 0;
  }
  .zhandianinfo a:nth-child(3n + 1) {
    padding-left: 0;
  }
  .b_bottom {
    margin-top: 100px;
  }
}

.bottom {
  margin-top: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  .bottom_content {
    width: 80%;
    padding: 40px 20px;
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    overflow: hidden;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }

  .info div {
    // width: 33%;
    height: 160px;
  }
}

.a_bottom_big {
  font-size: 16px;
  color: #999;
}
.zhandianinfo {
  margin-top: 20px;
  a {
    padding: 10px 10px;
  }
  a:nth-child(1) {
    padding-left: 0;
  }
  a:hover{
    color: #409eff;
  }
}
.wthree {
  width: 50%;
}
.beiana:hover {
  color:#409eff;
}
</style>
